<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="130">
          <FormItem label="输入框类型">
            <Select :transfer="true" size="small" v-model="type">
              <Option v-for="item in inputTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="尺寸">
            <Select :transfer="true" size="small" v-model="size">
              <Option v-for="item in sizes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="默认值">
            <Input size="small" v-model="defaultValue"/>
          </FormItem>
          <FormItem label="占位文本">
            <Input size="small" v-model="placeholder"/>
          </FormItem>
          <FormItem label="是否可清空">
            <i-switch v-model="clearable"></i-switch>
          </FormItem>
          <FormItem label="禁用状态">
            <i-switch v-model="disabled"></i-switch>
          </FormItem>
          <FormItem label="只读">
            <i-switch v-model="readonly"></i-switch>
          </FormItem>
          <FormItem label="显示为搜索型输入框">
            <i-switch v-model="search"></i-switch>
          </FormItem>
          <FormItemPanel title="输入框内图标">
            <Alert show-icon style="padding-right: 10px;">
              首次选择图标，组件可能不会实时刷新显示，可点击重载组件查看选中后效果
            </Alert>
            <FormItem :label-width="0">
              <Input size="small" v-model="icon" placeholder="可触发点击事件的图标"
                     search enter-button="选择" @on-search="openSelectIViewIconDrawer('icon')"/>
            </FormItem>
            <div class="m-b-5px"></div>
            <FormItem :label-width="0">
              <Input size="small" v-model="prefix" placeholder="内左侧图标"
                     search enter-button="选择" @on-search="openSelectIViewIconDrawer('prefix')"/>
            </FormItem>
            <div class="m-b-5px"></div>
            <FormItem :label-width="0">
              <Input size="small" v-model="suffix" placeholder="内右侧图标"
                     search enter-button="选择" @on-search="openSelectIViewIconDrawer('suffix')"/>
            </FormItem>
          </FormItemPanel>

          <FormItem label="文本域行数">
            <InputNumber size="small" :max="1000" :min="1" v-model="rows"></InputNumber>
          </FormItem>

          <FormItemPanel title="样式配置">
            <FormItem label="放大倍率">
              <Tooltip content="可将组件进行等比例放大" placement="left">
                <InputNumber size="small" :max="10" :min="0" :step="0.1" v-model="inputStyle.scaleValue" :active-change="false"></InputNumber> 倍
              </Tooltip>
            </FormItem>
            <FormItem label="宽度">
              <Input size="small" v-model="inputStyle.width"/>
            </FormItem>
            <FormItem label="背景色">
              <PnColorPicker size="small" v-model="inputStyle.backgroundColor" alpha recommend/>
            </FormItem>
            <FormItem label="文本色">
              <PnColorPicker size="small" v-model="inputStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="inputStyle.borderColor" alpha recommend/>
            </FormItem>
          </FormItemPanel>
        </Form>

      </TabPane>

      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>

          <FormItemPanel title="按下回车键时触发">
            <InteractionSender :interactionKey="'itemEnter'" :canAddFieldsMap="false"></InteractionSender>
            <Alert show-icon>通过value可获取输入框值</Alert>
            <CodeEditor v-model="onEnterCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="输入框聚焦时触发">

          </FormItemPanel>

        </Container>
      </TabPane>
    </Tabs>

    <SelectIViewIconDrawer ref="SelectIViewIconDrawer" @onSubmit="selectIViewIconDrawerOnSubmitHandler"></SelectIViewIconDrawer>
  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'InputCompForm',// 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompFormMixin],
    data() {
      return {
        inputTypes: [
          {
            label: 'text',
            value: 'text'
          },
          {
            label: 'textarea',
            value: 'textarea'
          }
        ],
        sizes: [
          {label: '默认', value: 'default'},
          {label: '小尺寸', value: 'small'},
          {label: '大尺寸', value: 'large'},
        ],

        currentOpenField: ''
      }
    },
    mounted() {

    },
    methods: {
      openSelectIViewIconDrawer (targetField) {
        this.currentOpenField = targetField
        this.$refs.SelectIViewIconDrawer.init()
      },
      selectIViewIconDrawerOnSubmitHandler (val) {
        this[this.currentOpenField] = val
        this.currentOpenField = ''
      }
    },
    computed: {
      ...mapFields({

        type: 'component.compConfigData.type',
        size: 'component.compConfigData.size',
        placeholder: 'component.compConfigData.placeholder',
        clearable: 'component.compConfigData.clearable',
        disabled: 'component.compConfigData.disabled',
        readonly: 'component.compConfigData.readonly',
        icon: 'component.compConfigData.icon',
        prefix: 'component.compConfigData.prefix',
        suffix: 'component.compConfigData.suffix',
        search: 'component.compConfigData.search',
        rows: 'component.compConfigData.rows',
        defaultValue: 'component.compConfigData.defaultValue',

        inputStyle: 'component.compConfigData.inputStyle',

        onEnterCode: 'component.compConfigData.onEnterCode',

      })
    }
  }
</script>

<style scoped>

</style>
